const $siteList = $(".siteList");
const $lastLi = $siteList.find($(".last"));
const xObject = JSON.parse(localStorage.getItem("x"));
const hashMap = xObject || [
  { logo: "Z", url: "https://zhihu.com" },
  { logo: "C", url: "https://cnodejs.org" },
  { logo: "B", url: "https://www.bilibili.com" },
  { logo: "G", url: "https://www.google.com" },
];
const simplify = (url) => {
  return url
    .replace("https://", "")
    .replace("http://", "")
    .replace("www.", "")
    .replace(/\/.*/, "");
};
const render = () => {
  $siteList.find("li:not(.last)").remove();
  hashMap.forEach((node, index) => {
    const $li = $(`<li>
      <div class="site">
      <div class="logo">${node.logo[0]}</div>
      <div class="link">${simplify(node.url)}</div>
      <div class="close">
        <svg class="icon">
          <use xlink:href="#icon-close"></use>
        </svg>
      </div>
      </div>
  </li>`).insertBefore($lastLi);
    $li.on("click", () => {
      window.open(node.url);
    });
    $li.on("click", ".close", (e) => {
      e.stopPropagation();
      hashMap.splice(index, 1);
      render();
    });
  });
};

render();

$(".addButton").on("click", () => {
  let url = window.prompt("请输入网址");
  if (url.indexOf("http") !== 0) {
    url = "https://" + url;
  }
  console.log(url);
  hashMap.push({
    logo: simplify(url)[0].toUpperCase(),
    url: url,
  });

  render();
});

window.onbeforeunload = () => {
  const string = JSON.stringify(hashMap);
  window.localStorage.setItem("x", string);
};

$(document).on('keypress', e => {
  const {key} = e
  for(let i=0; i<hashMap.length; i++){
    if(hashMap[i].logo.toLowerCase() === key){
      window.open(hashMap[i].url)
    }
  }
})